<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.Jcrop.js"></script>
<script src="./js/jquery.Vcontroller.js"></script>

<!-- <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> -->
<link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery.Vcontroller.css" type="text/css" />
</head>
<body>
  <!-- <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" /> -->
  <div style="margin:50px auto;">
    <div id="container">
    </div>
    <div id="control-wrap"></div>
    <button id="build">构建</button>
    <button id="confirm">确定</button>
    <button id="cancel">取消</button>
    <button id="rebuild">重新构建</button>
  </div>
  
<script type="text/javascript">
  jQuery(function($){
    // width: 画布宽度、height：画布高度 natural 原始宽高
    var str = `<video  id="target" width="600" height="600" naturalWidth="500" naturalHeight="500" targetWidth="800" targetHeight="450">
                <source src="video.mp4" type="video/mp4">
              </video>`;
    // How easy is this??
    // boxWidth,boxHeight 要渲染的画布大小
    var buildFn = function(){
      $('#container').html(str);
      var $target = $('#target');
      var aspectRatio = $target.attr('targetWidth')/$target.attr('targetHeight'),
          x,y,x2,y2,
          iWidth = parseInt($target.attr('width')),
          iHeight = parseInt($target.attr('height')),
          iTwidth = parseInt($target.attr('targetWidth')),
          iTheight = parseInt($target.attr('targetHeight'));

      var tScale = iTwidth/iTheight,// 目标比例
          oScale = iWidth/iHeight; // 原始比例
      if(oScale < tScale){
          //以宽为准
          x = 0;
          y = (iHeight-iWidth/aspectRatio)/2;
          x2 = iWidth;
          y2 = iWidth/aspectRatio + y;
      }else{
          //以高为准
          x = (iWidth - iHeight * aspectRatio)/2;
          y = 0;
          x2 = iHeight * aspectRatio + x;
          y2 = iHeight;
      }
      console.log([ x, y, x2, y2 ])
      $target.Jcrop({
        wheelZoomRatio : 0.01,
        aspectRatio : 16/9,
        setSelect: [ x, y, x2, y2 ], //setSelect用来初始化裁剪框
        allowNewSelect : false, //不允许新建选框
        onChange : function(){
          // console.log(jcropApi.tellScaled())
          // console.log(jcropApi.tellSelect())
        }
      },function(){
        jcropApi = this;
      });

      $('#control-wrap').Vcontroller({
          vid : '#target',
          cutTime : 5
      })
    }



    $('#build').click(function(){
       buildFn();
    })
    


    $('#confirm').click(function(){
      // 获取裁剪框的相对位置 以及大小
      console.log(jcropApi.getData());
      $('#container').data('workingData',jcropApi.getWorkingData())
      console.log($('#container').data('workingData'));
      jcropApi.destroy();
      console.log($('#control-wrap .mtc-trimgripper').data("startTime"));
      $('#control-wrap').html('');
    })

    $('#cancel').click(function(){
      // 隐藏的时候需要destroy
      jcropApi.destroy();
      $('#control-wrap').html('');
    })

    $('#rebuild').click(function(){
      // 隐藏的时候需要destroy
      buildFn();
      var workingData = $('#container').data('workingData');
      jcropApi.setWorkingData(workingData);
    })
  });

</script>
</body>
</html>

